<template>
	<view class="content">
		<z-paging v-model="acticleList" ref="paging" @query="queryList">
			<view class="head" slot="top">
				<view class="search">
					<uni-easyinput prefixIcon="search" v-model="searchValue" placeholder="搜索文章"></uni-easyinput>
					<view class="btn" @click="handleSearch">搜索</view>
				</view>
				<view class="uni-padding-wrap">
					<uni-segmented-control :current="current" :values="items" style-type="text" @clickItem="onClickItem" />
				</view>
			</view>
			<template #empty>
				<emptyView></emptyView>
			</template>
			<view class="article">
				<view class="article_con">
					<view>
						<view class="article_con_con">
							<view class="det-box" v-for="(x, y) in acticleList" :key="y" @click="handelArticleDetail(x)">
								<view>
									<image :src="$fullImageUrl(x.coverImage)"></image>
								</view>
								<view>
									<view>{{ x.title }}</view>
									<view>
										<text>{{ x.author }}</text>
										<text>{{ x.publishedAt }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>
<script>
import { getArticleCategoryList, getAppArticleList } from '@/api/index/index.js';
import config from '@/config';
export default {
	data() {
		return {
			items: [],
			articleType: [],
			articleTypeId: 0,
			current: 0,
			acticleList: [],
			searchValue: '',
			queryParams: {}
		};
	},
	// created() {

	// },
	onShow() {
		getArticleCategoryList().then((res) => {
			this.articleType = res.rows;
			this.articleTypeId = this.articleType[0].id;
			this.items = this.articleType.map((p) => p.name ?? '');
		});
	},
	watch: {
		searchValue() {
			if (String(this.searchValue).trim().length === 0) {
				this.$refs.paging.reload();
			}
		}
	},
	methods: {
		handleSearch() {
			this.$refs.paging.reload();
		},
		onClickItem(e) {
			if (this.items[e.currentIndex] === this.articleType[e.currentIndex].name) {
				this.articleTypeId = this.articleType[e.currentIndex].id;
				this.$refs.paging.reload();
			}
		},
		queryList(pageNum, pageSize) {
			this.queryParams = {
				categoryId: this.articleTypeId,
				title: this.searchValue
			};
			const querys = {
				pageNum,
				pageSize,
				...this.queryParams
			};
			getAppArticleList(querys).then((res) => {
				let list = [...res.rows];
				// list.map(i=>{
				// 	i.coverImage  = config.baseUrl + i.coverImage
				// })
				this.$refs.paging.completeByTotal(list, res.total);
				// this.$refs.paging.complete(list);
			});

			// console.log(1111);
			// setTimeout(() => {
			// 	this.$refs.paging.complete([1, 2, 3]);
			// }, 3000);
		},
		handelArticleDetail(e) {
			this.$tab.navigateTo(`/subset/pages/articlePage/articleDetail?articleId=${e.id}`);
		}
	}
};
</script>
<style scoped lang="less">
.content {
	width: 100%;
	height: 100%;
	background-color: #fff;
	overflow: hidden;
	.head {
		width: 100%;
		height: 188rpx;
		// position: relative;

		// .bg {
		// 	width: 100%;
		// 	height: 100%;
		// 	position: absolute;
		// 	left: 0;
		// }

		.search {
			width: 100%;
			// position: absolute;
			// top: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 22rpx 38rpx 22rpx 32rpx;

			::v-deep .uni-easyinput {
				width: 584rpx !important;
				height: 64rpx;
			}

			::v-deep .uni-easyinput__content {
				width: 584rpx !important;
				height: 64rpx;
			}

			::v-deep .uni-easyinput__content-input {
				padding-left: 20rpx;
			}

			::v-deep .is-input-border {
				border-radius: 34rpx;
			}

			::v-deep .uniui-search {
				font-size: 34rpx !important;
			}

			.btn {
				width: 100rpx;
				text-align: center;
				color: #6d6d6d;
				font-size: 26rpx;
			}
		}
	}
	.uni-padding-wrap {
		margin-top: 26rpx;
		// padding: 0 10rpx 0 10rpx;
		// box-sizing: border-box;
		padding: 0 40rpx 0 42rpx;
		box-sizing: border-box;
		/deep/ .segmented-control__item--text {
			font-weight: bolder;
			font-size: 30rpx !important;
			color: #333333 !important;
		}
	}
	.article {
		width: 100%;
		height: calc(100% - 188rpx);

		&_con {
			width: 100%;
			height: 100%;

			> view:last-child {
				width: 100%;
				height: calc(100% - 138rpx);
				margin-top: 40rpx;
				> view:nth-child(1) {
					padding: 0 30rpx 40rpx 32rpx;
					box-sizing: border-box;
				}
				.det-box {
					width: 100%;
					height: 216rpx;
					margin-bottom: 24rpx;
					border-radius: 20rpx;
					padding: 24rpx 22rpx 22rpx 16rpx;
					box-sizing: border-box;
					display: flex;

					> view:nth-child(1) {
						width: 184rpx;
						height: 170rpx;
						border-radius: 20rpx;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					> view:last-child {
						width: calc(100% - 184rpx);
						height: 170rpx;
						padding: 8rpx 0 2rpx 24rpx;
						box-sizing: border-box;
						display: flex;
						flex-wrap: wrap;
						align-content: space-between;

						> view:nth-child(1) {
							width: 100%;
							font-weight: bold;
							font-size: 26rpx;
							color: #333333;
						}

						> view:last-child {
							width: 100%;
							display: flex;
							justify-content: space-between;

							text {
								font-weight: 400;
								font-size: 24rpx;
								color: #999999;
							}
						}
					}
				}

				.det-box:nth-child(1) {
					background: linear-gradient(to top left, #ffffff 75%, #fbe9ff 100%);
					box-shadow: 0rpx 0rpx 12rpx rgba(0, 0, 0, 0.16);
				}

				.det-box:nth-child(2) {
					background: linear-gradient(to top left, #ffffff 75%, #d9ecff 100%);
					box-shadow: 0rpx 0rpx 12rpx rgba(0, 0, 0, 0.16);
				}

				.det-box:nth-child(3) {
					background: linear-gradient(to top left, #ffffff 75%, #e4e3ff 100%);
					box-shadow: 0rpx 0rpx 12rpx rgba(0, 0, 0, 0.16);
				}

				.det-box:nth-child(4) {
					background: linear-gradient(to top left, #ffffff 75%, #fffcd9 100%);
					box-shadow: 0rpx 0rpx 12rpx rgba(0, 0, 0, 0.16);
				}
			}
		}
	}
}
</style>
